<template>
  <div>
    <div class="big">
      <div class="centercenter">
        <div id="main"></div>
      </div>
      <div class="wenzi" v-if="show">
        <div class="wenzishang">选择正确</div>
        <div class="wenzixia">21人 67%</div>
      </div>
      <div class="wenzi2" v-if="show">
        <div class="wenzishang">选择错误</div>
        <div class="wenzixia">10人 33%</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Radar",
  data() {
    return {
      datas: [
        "龙纹",
        "莲花纹",
        "如意纹",
        "云纹",
        "波浪纹",
        "万字纹",
        "回纹",
        "鳞纹",
        "锁纹",
        "火纹",
      ],
      isshow: true,
      show: false,
      timer: "",

    };
  },

  mounted() {
    this.ec();
    this.timer = setTimeout(() => {
      this.show = true;
    }, 2800);
  },
  methods: {
    tijiao() {
      this.$message({
        message: "提交成功",
        type: "success",
      });
    },

    ec() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          show: true,
          formatter: " {c}% ",
        },
        // title: {
        //   text: "情绪分析情况",
        //   // 副标题
        //   // subtext: "Fake Data",
        //   left: "center",
        //   top: "20",
        //   // 调整标题文字的位置样式
        //   textStyle: {
        //     fontSize: 30,
        //     color: "#8051bb",
        //   },
        // },
        // 色块提示属性
        legend: {
          orient: "vertical",
          bottom: "bottom",
          // data: ["运动时长", "卡路里"],
          // 这个data里面没有加那个invisible 这个是消失那块的数据
          data: [
            {
              name: "运动时长",
              icon: "roundRect", // 提示色块的形状
            },
            {
              name: "卡路里",
              icon: "roundRect",
            },
          ],
          // 字体大小
          textStyle: {
            fontSize: 30,
          },
          itemHeight: 30, // 修改icon图形大小
          itemWidth: 80, // 修改icon图形大小
          itemGap: 100, // 修改间距
        },
        series: [
          {
            animationDuration: 3500,

            // name: "情绪分析",
            type: "pie",
            hoverAnimation: false, //鼠标移入变大
            clockWise: false,
            radius: ["65%", "35%"],
            
            itemStyle: {
              normal: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#b397d6", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#7e4db9", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                // 设置圆角
                // borderRadius: 20,
              },
            },
            data: [
              // 这块是其实有数据 把数据颜色给隐藏了 所以显示出来是半宽
              {
                value: 33,
                name: "选择错误",
                itemStyle: {
                  normal: {
                    // color: "rgba(0,0,0,0)",
                    color: "#484065",
                  },
                },
              },
              {
                value: 67,
                name: "选择正确",
                itemStyle: {
                  normal: {
                    // color: "rgba(0,0,0,0)",
                    color: "#9c2831",
                  },
                },
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.big {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  // width: 83vw; // 这里将会对整体进行大小处理，不要再多说，simple size size size size 也是必须的！！！！ 这个大小不是必须的！！！！ 如果不是必须的，可以自由选择！！！！ （这个大小也是可以自由选择的！！！！） 大小也是可以自由选择的！！！！ （这个大小也是可以自由选择的！！
  background-image: url(@/assets/images/bjt.jpg);
  background-size: 100% 100%;
  position: relative;
  .wenzi {
    position: absolute;
    right: 500px;
    bottom: 400px;
    .wenzishang{
      font-size: 32px;
    }
    .wenzixia{
      color: #9c2831;
      font-size: 45px;
    }
  }
  .wenzi2 {
    position: absolute;
    left: 500px;
    bottom: 400px;
    .wenzishang{
      font-size: 32px;
    }
    .wenzixia{
      color: #9c2831;
      font-size: 45px;
    }
  }
  .centercenter {
    width: 100%;
    height: 72%;
    // background-color: #fff;
    position: absolute;
    top: 22%;
    display: flex;
    justify-content: center;
    align-items: center;
    #main {
      width: 1600px;
      height: 100%;
      margin-bottom: 6%;
      // background-color: #fff;
    }
  }
  .tupian {
    position: absolute;
    top: 72.5%;
    width: 1600px;
    margin-left: 8.3%;
    // background-color: #ccc;
    display: flex;
    .every {
      // display: flex;
      margin-left: 3.7%;
      // border: 1px solid #fff;
      .imgimgimg {
        width: 75px;
      }
    }
  }
}
</style>
